<template lang='pug'>
div.wireFrame-form-wrap
  .frame-box(:style="targetWidth")
    //- :class="curFrame === 1 ? 'toggleFrame' : curFrame > 1 ? 'toggleItem' : 'toggleClose'"
    // .frame-box(:style="toggleFrame|frameWidth(curFrame)")
    .form-wrap.form-wrap-left
      .slide-bar(@click.stop="toggleFrame(!curFrame)")
        h5
          i.iconfont(:class="curFrame > 0 ? 'icon-right' : 'icon-left'")
      slot
    // .form-wrap.form-wrap-right#from-wrap-right
    //   slot(name="secFrame")
</template>

<script>
/**
 * @name sliderFrame 侧边栏 - 1屏
 * @author linmn
 * @desc 仅允许弹出一屏
 */
export default {
  name: 'SliderFrame',
  props: {
    toggleTouch: {
      type: Boolean | Number,
      default: false
    }, // 由外部控制是否开启
    sliceWidth: {
      type: Number,
      default: 360
    } // 弹出的宽度
  },
  computed: {
    targetWidth () {
      const width = this.curFrame ? Number(this.sliceWidth) || this.defaultWidth : 0
      return {
        width: width + 'px',
        right: this.curFrame ? 0 : -width
      }
    }
  },
  watch: {
    toggleTouch (val) {
      this.toggleFrame(val ? 1 : 0)
    }
  },
  data () {
    return {
      defaultWidth: 360,
      curFrame: Boolean(this.toggleTouch)
    }
  },
  methods: {
    /**
     * @desc 切换分屏
     * @param item num 当前分屏数
      */
    toggleFrame (target, isClose = false) {
      if (isClose || this.curFrame === target) {
        target = 0
      }
      this.curFrame = target
      this.$emit('changeCurFrame', target)
    }
  }
}
</script>

<style lang='sass' scoped>
@mixin translate-x ($len)
  right: $len
.wireFrame-form-wrap
  position: relative
  // width: 365px
  height: 100%
.frame-box
  box-shadow: -3px 0px 10px rgba(191,191,191,.36)
  position: absolute
  right: 0
  top: 0
  height: 100%
  width: 360px
  display: flex
  background: #fff
  transition: all 0.6s
  // @include translate-x(-360px)
  .form-wrap
    display: flex
    overflow-y: auto
    overflow-x: hidden
    &>.slide-bar
      position: absolute
      width: 54px
      height: 50px
      top: 0
      left: -48px
      text-align: center
      line-height: 50px
      cursor: pointer
      border-bottom-left-radius: 4px
      border-top-left-radius: 4px
      background: #fff
      box-shadow: -3px 0 10px rgba(191,191,191,.36)
      border-left: 1px solid rgba(222,227,231,.56)
  .form-wrap-left
    flex: 1
    border-right: 1px solid rgba(191,191,191,.36)
  .form-wrap-right
    flex: 1
    .frame-form
      padding: 20px 10px
.toggleFrame
  @include translate-x(0)
.toggleItem
  @include translate-x(0)
.toggleClose
  @include translate-x(-360px)
</style>
